<template>
  <div class="usable-content" style="height: 100%;width: 100%;">
    <div class="usable-wrapper card-comment-wrapper" style="height: 100%;width: 100%;position: relative;">
      <draggable
        style="height: 100%;z-index: 1;"
        v-model="usableList"
        v-bind="{
          ...dragOptions,
          targetName: 'canUseCard'
        }"
        :disabled="!setting"
        @start="startDraggable"
        @end="cardDraggable = false"
      >
        <div
          :class="['usable-item', 'card-comment-item', setting ? 'draggable-move-clazz' : ''].join(' ')"
          v-for="(item, index) in usableList"
          :key="'usable-item' + index"
        >
          <div class="list-item-left ellipis-1">
            <i :class="
               [
                  'theme-less-background-color',
                  'icon_iconfont',
                  item.icon && item.icon !== '#' ? icon.icon : 'el-icon-picture-outline'
                ].join(' ')
              "
            ></i>
            <span>{{ item.cardName }}</span>
          </div>
        </div>
      </draggable>
      <a-empty
        style="z-index: 20;position: absolute;left: 50%;transform: translateX(-50%);top: 0;"
        description="暂无可用卡片"
        v-show="!usableList.length"
      />
    </div>
  </div>
</template>

<script>
  import { cardList } from '@client/addHome/service'
  export default {
    name: 'UseCardMenu',
    data() {
      return {
        loading: false,
        dragOptions: {
          animation: 200,
          ghostClass: 'ghost',
          group: { name: 'group', pull: 'clone' }
        },
        usableList: [] // 可用卡片列表
      }
    },
    props: {
      setting: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      startDraggable(e) {
        // 反馈被拖动的应用
        this.$store.dispatch('app/setDraggableObj', this.usableList[e['oldIndex']] || {})
      },
      // 父组件通知更新
      notify() {
        this.$httpResultHandler(cardList).then(res => {
          this.usableList = res.rows
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .icon_iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    margin-right: 5px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background-color: #3672fe;
  }
  .collect-content {
    padding: 5px 0px;
  }
  .card-comment-wrapper {
    padding: 5px 0px;
    line-height: 30px;
    .card-comment-item {
      display: flex;
      cursor: pointer;
      padding: 5px 10px;
      justify-content: space-between;
      &:active {
        background-color: rgba(233, 233, 233, 0.4);
      }
      .iconfont {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        margin-right: 5px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        background-color: #3672fe;
      }
      & > span {
        display: inline-block;
        line-height: 30px;
        font-size: 12px;
      }
    }
  }
</style>
